<template>
  <div class="container">
    <div class="order_item" v-for="order in orders" :key="order.id">
      <div class="header">
        <div class="create_time">订单时间: {{ order.created_at }}</div>
        <div class="status">{{ getStatus(order.status) }}</div>
      </div>
      <van-card
        v-for="goods in order.order_goods_infos"
        :key="goods.id"
        :num="goods.count"
        :price="((goods.goods_info.price || 0) / 100).toFixed(2)"
        :desc="goods.goods_info.detail_info"
        :title="goods.goods_info.name"
        :thumb="goods.goods_info.pic_url"
      />
      <div class="footer">
        <div v-if="order.status !== 1">
          支付方式 {{ getPayType(order.pay_type) }}
        </div>
        <div>总金额：￥{{ (order.price / 100).toFixed(2) }}</div>
      </div>
    </div>
  </div>
</template>


<script setup>
import { ref, onMounted, defineProps } from "vue";
import { orderList } from "@/api/order";

let orders = ref([]);

let props = defineProps({
  status: {
    type: Number,
  },
});

let getStatus = (status) => {
  switch (status) {
    case 1:
      return "待支付";
    case 2:
      return "待发货";
    case 3:
      return "待收货";
    case 4:
      return "待评价";
  }
};

let getPayType = (type) => {
  switch (type) {
    case 1:
      return "微信";
    case 2:
      return "支付宝";
    case 3:
      return "云闪付";
  }
};

// 组件挂载完成  自动查询对应状态订单
onMounted(async () => {
  // status 从父组件 传递的不同的值
  let res = await orderList({ page: 1, limit: 100, status: props.status });
  orders.value = res.data.list || [];
});
</script>

<style lang="scss" scoped>
.container {
  --van-card-background: #f0f0f0;
  .order_item {
    padding: 10px;
    margin: 10px;
    background: #fff;
    border-radius: 12px;
    .header {
      display: flex;
      justify-content: space-between;
      font-size: 12px;
      .create_time {
        color: #2f3640;
      }
      .status {
        color: #353b48;
      }
    }
    .goods_item {
      margin: 5px 0;
      background: #f0f0f0;
      border-radius: 10px;
    }
    .footer {
      font-size: 10px;
      color: #2f3640;
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin: 2px;
    }
  }
}
</style>
